<template>
  <el-card class="history-table-card">
    <DynamicTable
      :columns="columns"
      :data="data"
      :loading="loading"
      :pagination="pagination"
      @current-page-change="handlePageChange"
      @size-change="handleSizeChange"
    >
      <template #toolbar-right>
        <!-- 可以添加表格工具栏按钮 -->
      </template>
    </DynamicTable>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import { DynamicTable } from "@/components/DynamicTable";
import { TableColumn, PaginationConfig } from "@/components/DynamicTable/types";

// 定义属性
const props = defineProps({
  columns: {
    type: Array as () => TableColumn[],
    required: true,
  },
  data: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  pagination: {
    type: Object as () => PaginationConfig,
    required: true,
  },
});

// 定义事件
const emit = defineEmits([
  "current-page-change",
  "size-change",
  "view-detail",
  "compare",
]);

// 处理分页变化
const handlePageChange = (page: number) => {
  emit("current-page-change", page);
};

// 处理每页条数变化
const handleSizeChange = (size: number) => {
  emit("size-change", size);
};
</script>

<style scoped lang="scss">
.history-table-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}
</style>
